<template>
<div id="father">
  <div id="tit">
 <i style="color: #009688" class="el-icon-s-home"></i> <b> &nbsp; 车位管理</b>
  </div>
  <div id="found_box">
    <div class="text1">选择物业:</div>
    <div class="select1">
     <select id="property" class="sel">
      <option value="all">-所有物业-</option>
     </select>
    </div>
    <div class="text1">车位状态:</div>
    <div class="select1">
     <select id="status" class="sel">
      <option value="all">-所有状态-</option>
      <option value="0">停用</option>
      <option value="1">个人私有</option>
      <option value="2">待出租</option>
      <option value="3">已出租</option>
      <option value="4">查封</option>
     </select>
    </div>
    <div class="text2">车位价格(每小时):</div>
    <div class="select1">
      <select id="price" class="sel">
       <option value="all">-所有价格-</option>
        <option value="1">1元</option>
        <option value="2">2元</option>
        <option value="3">3元</option>
        <option value="4">4元</option>
        <option value="5">5元</option>
        <option value="6">6元</option>
        <option value="7">7元</option>
        <option value="8">8元</option>
        <option value="9">9元</option>
        <option value="10">10元</option>
      </select>
    </div>
    <div class="text1">车牌录入:</div>
    <div class="select1">
      <select id="license" class="sel">
        <option value="all">-不区分是否录入-</option>
        <option value="0">未录入车牌</option>
        <option value="1">已录入车牌</option>
      </select>
    </div>
    <input type="button" value="查询" id="found_button" onclick="show()"/>
  </div>



    <table id="tabl">
    <thead>
    <tr>
      <th>停车位照片</th>
      <th>车主</th>
      <th>每小时价格(元)</th>
      <th>分成比例</th>
      <th>车位位置</th>
      <th>录入车牌情况</th>
      <th>车位状态</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody id="tb">
    </tbody>
      <tfoot>
<!--      <tr>-->
<!--        <td colspan="8" id="tf">-->
<!--           <input type="button" value="1" class="pagcli"/>-->
<!--          <input type="button" value="2" class="pag"/>-->
<!--          <input type="button" value="3" class="pag"/>-->
<!--        </td>-->
<!--      </tr>-->
      </tfoot>
    </table>
  <div class="modal" id="modal-two" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-header" style="text-align: center">
        <h2 style="color: brown">上架车位</h2>
        <!--        <a href="#" class="btn-close" aria-hidden="true">×</a> -->
      </div>
      <div class="modal-body">
       车位当前状态:<span id="sta" style="color: #009688;float: right"></span><br/>
       车位价格(每小时):
          <select id="choosePrice" class="sel2" style="float: right">
            <option value="all">-选择价格-</option>
            <option value="1">1元</option>
            <option value="2">2元</option>
            <option value="3">3元</option>
            <option value="4">4元</option>
            <option value="5">5元</option>
            <option value="6">6元</option>
            <option value="7">7元</option>
            <option value="8">8元</option>
            <option value="9">9元</option>
            <option value="10">10元</option>
          </select>
        <input type="hidden" id="carId"/>
        <input type="hidden" id="stats"/>
        <input type="button" value="提交" id="butt1" @click="upl()"/>
      </div>
      <div class="modal-footer">
        <a href="/#1-3" class="btn">返回</a>
      </div>
    </div>
  </div>
</div>
</template>
<script>

export default {
  name: "Parking_Management",

  data(){},
  created(){
    let _this=this;
    window.up=_this.up;
    window.down= _this.down;
    window.ye=_this.ye;
    window.show=_this.show;
  },
  mounted() {
   this.sa.loading("loading！");
    this.show();
  },
  methods:{
    down:function (id){
      this.sa.ajax("/e-owner/parking-information/shelvesParking/"+id, {},
          function (resp){
              if(resp.data==true){
                this.sa.ok("下架成功")
                this.show(null);
              }else{
                this.sa.error("下架失败")
                this.show(null)
              }
          }.bind(this),
          {type : 'put'})
    },
  up:function (stau,id){
      var i;
    switch (stau){
      case 0:
        i="停用"
         break;
      case 1:
        i="个人私有"
        break;
      case 3:
        i="已出租"
        break;
      case 4:
        i="查封"
        break;
    }
    $("#carId").val(id);
    $("#stats").val(stau);
    $("#sta").html(i);
    window.location.href="#modal-two"
  },
  upl(){
      var token = localStorage.getItem("token");
    //  var status = $("#stats").val();
      var rent = $("#choosePrice").val();
      var id = $("#carId").val();
    this.sa.ajax("/e-owner/parking-information/shelfSpace/"+token+"/"+id+"/2/"+rent, {},
        function (resp){
          if(resp.data==true){
            window.location.href="#2-8"
            this.show(null);
          }else{
            this.sa.error("上架失败")
          }
        }.bind(this),
        {type : 'put'})
  },
    ye(j){
      this.show(j)
    },
  show(j){

    var propertyId = $("#property").val();
    if(propertyId=="all"){
      propertyId=null;
    }
    var parkingStatus=$("#status").val();
    if(parkingStatus=="all"){
      parkingStatus=null
    }
    var parkingRent =$("#price").val();
    if(parkingRent=="all"){
      parkingRent=null
    }
    var licensePlateNumberEntering =$("#license").val();
    if(licensePlateNumberEntering=="all"){
      licensePlateNumberEntering=null
    }
    var i = localStorage.getItem("token");
     this.sa.ajax("/e-owner/parking-information/findAllIn", {
      //"token" : localStorage.getItem("token")
       "token" : i,
       "propertyId" :propertyId,
       "parkingStatus":parkingStatus,
       "parkingRent":parkingRent,
       "licensePlateNumberEntering":licensePlateNumberEntering,
       "size":3,
       "current":j
        },
        function (resp) {
    //  alert(resp.data.chewei.records[0].parkingAddress)
          var html="";
          for(var i in resp.data.chewei.records){
            var re = resp.data.chewei.records[i];

            html +="<tr><td><img src='"+re.parkingPicture+"'/></td>"
                for(var ii in resp.data.yonghu){
                  var yh = resp.data.yonghu[ii]
                  if(re.carUid!=0) {
                    if (yh.uid == re.carUid) {
                      html += "<td>"+yh.uname+"</td>"
                      break;
                    }
                  }else{
                    html+="<td>无车主</td>"
                    break;
                  }
                }
          html+="<td>"+re.parkingRent+"</td>"+
                "<td>"+re.parkingProportion+"</td>"+
                "<td>"+re.parkingAddress+"</td>"
                if(re.licensePlateNumberEntering==0){
                html+=    "<td>未录入车牌</td>"
                }else{
                  html+=  "<td>已录入车牌</td>"
                }
                switch(re.parkingStatus){
                  case 0:
                    html+="<td>停用</td>"
                    break;
                  case 1:
                    html+="<td>个人私有</td>"
                    break;
                  case 2:
                    html+="<td>待出租</td>"
                    break;
                  case 3:
                    html+="<td>已出租</td>"
                    break;
                  case 4:
                    html+="<td>查封</td>"
                    break;
                }
            // 0停用  1个人私有  2待出租  3已出租  4查封
                if(re.parkingStatus==2){
                  html+="<td><input style='color: white;width: 80%;height: 80%;font-size: 115%;background-color:#009688;' type='button' value='下架' onclick='down("+re.parkingId+")'/></td></tr>"
                }else if(re.parkingStatus==1 || re.parkingStatus==0){
                  html+="<td><input style='color: black;width: 80%;height: 80%;font-size: 115%;background-color:#EEEEEE;' type='button' value='上架' onclick='up("+re.parkingStatus+","+re.parkingId+")'/></td></tr>"
                }else if(re.parkingStatus==3){
                  html+="<td></td></tr>"
                }else if(re.parkingStatus==4){
                  html+="<td><input style='color: darkred;width: 80%;height: 80%;font-size: 115%;background-color:#EEEEEE;' type='button' value='申诉'/></td></tr>"
                }
          }
          $("#tb").html(html);

          var html1="<option value='all'>-所有物业-</option>"
          for(var i3 in resp.data.wuye){
            var wy  = resp.data.wuye[i3];
            var temp = wy.propertyName.split("物业");

            html1+="<option value='"+wy.propertyId+"'>"+temp[0]+"</option>"
          }
          $("#property").html(html1);
          
          var html2="<tr><td colspan='8'>";
          for (let j = 0; j < resp.data.chewei.pages; j++) {
            if(j==resp.data.chewei.current-1) {
              html2 +="<input type='button' value='"+(j+1)+"' style='  background-color: #009688;\n" +
                  "  width: 5%;\n" +
                  "  height: 90%;\n" +
                  "  color: white;\n" +
                  "  border: 1px solid #009688;\n" +
                  "  margin-right: 0.3%;\n" +
                  "  margin-left: 0.3%;\n" +
                  "  margin-top: 0.3%;\n" +
                  "  margin-bottom: 0.3%;\n" +
                  "  font-size: 115%;'/>"
              this.curr =resp.data.chewei.current;
            }else {
              html2+= "<input type='button' value='"+(j+1)+"' onclick='ye("+(j+1)+")' style='background-color: #EEEEEE;\n" +
                  "  width: 5%;\n" +
                  "  height: 90%;\n" +
                  "  border: 1px solid #009688;\n" +
                  "  margin-right: 0.3%;\n" +
                  "  margin-left: 0.3%;\n" +
                  "  font-size: 115%;'/>"
            }
          }
          html2+="</td></tr>"
          $("tfoot").html(html2);

        }.bind(this),
        {type: 'get'}
      )
    },

  }
}
</script>

<style scoped>
#father{
  background-color: white;
  width: 100%;
  height: 669px;
}
#tit{
  width:40%;
  margin-left: 30%;
  margin-top: 2%;
  height: 5%;
  text-align: center;
  font-size: 170%;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-left: #805322 5px solid;
  border-right: #805322 5px solid;
}
#found_box{
  padding-top: 1%;
  width: 80%;
  margin-top: 1.5%;
  margin-left: 10%;
  background-color: gray;
  height: 6%;
  text-indent: 20px;
  background-color: #EEEEEE;
  border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;
  border: 1px solid black;
}
.text1{
  width: 10%;
  font-size: 120%;
  height: 100%;
  color: black;
  float: left;
}
.text2{
  width: 17%;
  font-size: 120%;
  height: 100%;
  color: black;
  float: left;
}
.select1{
  width: 8%;
  font-size: 110%;
  height: 100%;
  float: left;
}
#found_button{
  float: right;
  margin-right: 3%;
  width: 12%;
  height: 70%;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 15px;
  border: 1px solid black;
  background-color: #009688;
  color: black;
}
.sel{
  border-bottom-right-radius: 10px;
  border-top-left-radius: 10px;
  border: #009688 1px solid;
  height: 70%;
  float: left;
}
#found_button:hover{
  color: white;
  border: 1px solid black;
}

option{
  width: 100px;
}
#tabl{
  margin-top: 1.5%;
  margin-left: 10%;
  width: 80%;
  border: 1px solid black;
  text-align: center;
}

th{
  border-bottom: 1px black solid;
  width: 10%;
  font-size: 115%;
}
table {
  border-spacing: 0;/*去掉单元格间隙*/
}
tfoot{
  height: 100px;
}
.pag{
  background-color: #EEEEEE;
  width: 5%;
  height: 90%;
  border: 1px solid #009688;
  margin-right: 0.3%;
  margin-left: 0.3%;
  font-size: 115%;
}
.pagcli{
  background-color: #009688;
  width: 5%;
  height: 90%;
  color: white;
  border: 1px solid #009688;
  margin-right: 0.3%;
  margin-left: 0.3%;
  margin-top: 0.3%;
  margin-bottom: 0.3%;
  font-size: 115%;
}
.shelf{
  width: 80%;
  height: 80%;
  color: white;
  font-size: 115%;
}

.modal:before {
  content: "";
  display: none;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.modal:target:before {
  display: block;
}
.modal:target .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  top: 10%;
}
.modal-dialog {
  background: #fefefe;
  border: #333 solid 1px;
  border-radius: 5px;
  margin-left: -120px;
  position: fixed;
  left: 40%;
  top: -100%;
  z-index: 11;
  width: 40%;
  -webkit-transform: translate(0, -500%);
  -ms-transform: translate(0, -500%);
  transform: translate(0, -500%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal-body {

  height: 150px;
  padding-top: 5%;
  padding-left: 24%;
  padding-right: 24%;
  font-size: 120%;
}
.modal-header,
.modal-footer {
  padding: 10px 20px;
}
.modal-header {
  border-bottom: #eee solid 1px;
}
.modal-header h2 {
  font-size: 20px;
}
.modal-footer {
  border-top: #eee solid 1px;
  text-align: right;
}
.bigButtons1{
  padding-left: 15%;
  padding-top: 18%;
  height: 58%;
  width: 30%;
  color: white;
  float: left;
  background-color: gray;
  font-size: 140%;
  border-radius: 8px;
  border: 5px solid  gray;
}
.bigButtons1:hover{
  border: 5px solid  #de9830;

}
.bigButtons2{
  padding-left: 15%;
  padding-top: 18%;
  height: 58%;
  width: 30%;
  color: white;
  float: right;
  background-color: #de9830;
  font-size: 140%;
  border-radius: 8px;
  border: 5px solid #de9830;
}
.bigButtons2:hover{
  border: 5px solid gray;
}
.btn {
  background: #428bca;
  border: #357ebd solid 1px;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 8px 15px;
  text-decoration: none;
  text-align: center;
  min-width: 60px;
  position: relative;
  transition: color .1s ease;
}
.btn:hover {
  background: #357ebd;
}
.sel2{
  margin-top: 1.5%;
  border: #009688 1px solid;
  font-size: 85%;
}
#butt1{
  margin-top: 15%;
  width: 50%;
  margin-left: 25%;
  background-color: #009688;
  font-size: 120%;
  border: #009688 1px solid;
  color: white;
}
</style>